<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.farm.web.constant.FarmConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<PF:basePath/>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${classview.classt.name }-<PF:ParameterValue
		key="config.sys.title" /></title>
<meta name="description"
	content='<PF:ParameterValue key="config.sys.mate.description"/>'>
<meta name="keywords"
	content='<PF:ParameterValue key="config.sys.mate.keywords"/>'>
<meta name="author"
	content='<PF:ParameterValue key="config.sys.mate.author"/>'>
<meta name="robots" content="index,follow">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<jsp:include page="../atext/include-web.jsp"></jsp:include>
<link rel="stylesheet"
	href="<PF:basePath/>text/lib/kindeditor/editInner.css" />
<script charset="utf-8"
	src="<PF:basePath/>text/lib/super-validate/validate.js"></script>

</head>
<style>
.wlp-userspace-h1 {
	font-size: 36px;
	text-align: center;
}

.picLUp {
	width: 100%;
	background-size: 100% 100%;
	color: white;
	background-color: #424f5c;
}

.wpl-class-tab .nav  li a {
	color: #ffffff;
}

.wpl-class-tab .nav  li a:HOVER {
	color: #666666;
}

.wpl-class-tab .nav .active a {
	color: #666666;
}

.wlp-hour-box:HOVER {
	background-color: #fef3f3;
	color: #f20d0d;
}

.wlp-hour-box {
	padding: 4px;
	padding-top: 8px;
	cursor: pointer;
}
</style>
<body>
	<div class="container-fluid">
		<div class="row">
			<!-- 导航 -->
			<jsp:include page="../commons/head.jsp"></jsp:include>
		</div>
	</div>
	<div class="container-fluid  picLUp" style="padding-top: 20px;">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<jsp:include page="commons/viewClassHeadInfo.jsp"></jsp:include>
				</div>
			</div>
		</div>
		<div class="container wpl-class-tab">
			<ul class="nav nav-tabs" style="margin-top: 20px;">
				<c:if test="${!empty classview.introText }">
					<li role="presentation"><a
						href="classweb/Pubview.do?classid=${classview.classt.id }">&nbsp;&nbsp;&nbsp;课程介绍&nbsp;&nbsp;&nbsp;</a></li>
				</c:if>
				<li role="presentation" class="active"><a id="backTabLi"
					href="classweb/Pubview.do?type=comments&classid=${classview.classt.id }">&nbsp;&nbsp;&nbsp;评论&nbsp;&nbsp;&nbsp;</a></li>
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		<div class="container">
			<div class="row">
				<div class="col-xs-9">
					<div style="margin-top: 20px;">
						<!-- 1:专业,2:课程,3:课时 -->

						<style>
							.wlp-comments-list li {
								list-style: none;
								margin-left: -40px;
								min-height: 50px;
								border: 1px dashed #999999;
								margin-top: 20px;
								margin-bottom: 20px;
								padding: 20px;
								border-radius: 4px;
								background-color: #f8fafc;
							}

							.wlp-comments-list li img {
								height: 48px;
								width: 48px;
								border-radius: 24px;
							}

							.wlp-comments-list .comments-text {
								font-size: 14px;
								color: #666666;
								background-color: #ffffff;
								padding: 10px;
								border-radius: 7px;
								border: 1px solid #eeeeee;
							}

							.wlp-comments-list h4 {
								font-size: 16px;
								color: #333333;
							}

							.wlp-comments-list .comment-time {
								font-size: 14px;
								color: #999999;
								margin-right: 20px;
							}

							.wlp-comments-list .comments-parent {
								border-left: 5px solid #999999;
								padding: 10px;
								margin-top: 4px;
								background-color: #eeeeee;
							}

							.wlp-comments-list .comments-parentuser {
								color: #333333;
								font-weight: 700;
							}
						</style>
						<div style="height: 35px;">
							<button onclick="publicComments();" style="float: right;" type="button" class="btn btn-default">发布评论</button>
						</div>
						<hr style="margin-bottom: 10px;" class="wlp-userspace-hr">
						<ul class="wlp-comments-list" id="commentsListDataBoxId">
						</ul>
						<nav aria-label="...">
							<input type="hidden" id="loadCurrentPageId" value="1">
							<ul class="pager" style="margin: 0px;">
								<li id="loadLastButtionId" style="display: none;"><a href="javascript:loadLastPage();">上一页</a></li>
								<li id="loadNextButtionId" style="display: none;"><a href="javascript:loadNextPage();">下一页</a></li>
							</ul>
						</nav>

						<!-- Modal -->
						<div class="modal fade" id="commentsForm" tabindex="-1" role="dialog" aria-labelledby="commentsOpLabel" style="display: none;">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
										<h4 class="modal-title" id="commentsOpLabel">回复评论</h4>
									</div>
									<div class="modal-body">
										<form method="post" id="submitcommentsFormId" action="classweb/savebase.do">
											<input name="appid" id="commentsAppidId" type="hidden" value="${classview.classt.id }"> <input name="apptype" id="commentsApptypeId" type="hidden" value="2">
											<fieldset id="commentsfieldsetId">
												<div class="row">
													<div class="col-xs-12">
														<div class="form-group" id="noteGroupId">
															<textarea class="form-control" id="commentsNoteId" name="note" placeholder="请录入评论内容......" rows="3"></textarea>
															<span id="noteErrorId" class="help-block"></span>
														</div>
													</div>
												</div>
											</fieldset>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" id="commentsSubmitButtonId" onclick="submitcommentsForm();" class="btn btn-success">发表评论</button>
									</div>
								</div>
							</div>
						</div>
						<script>
							$(function() {
								validateInput('noteId', function(id, val, obj) {
									// 课程简介
									if (valid_isNull(val)) {
										return {
											valid : false,
											msg : '不能为空'
										};
									}
									if (valid_maxLength(val, 512)) {
										return {
											valid : false,
											msg : '长度不能大于' + 512
										};
									}
									return {
										valid : true,
										msg : '正确'
									};
								}, 'noteErrorId', 'noteGroupId');
							});
							//提交表单
							function submitcommentsForm() {
								if (!validate('submitcommentsFormId')) {
									return;
								}
								if (confirm("是否立即发布评论？")) {
									$('#commentsSubmitButtonId').attr('disabled', 'disabled');
									$('#commentsfieldsetId,fieldset').attr('disabled', 'disabled');
									$.post('classcomment/add.do', {
										'classid' : $('#commentsAppidId').val(),
										'description' : $('#commentsNoteId').val()
									}, function(flag) {
										if (flag.STATE == 0) {
											$('#commentsForm').modal('hide')
											$('#commentsfieldsetId,fieldset').removeAttr("disabled");
											$('#commentsSubmitButtonId').removeAttr("disabled");
											loadComments(1);
										} else {
											alert(flag.MESSAGE);
											$('#commentsfieldsetId,fieldset').removeAttr("disabled");
											$('#commentsSubmitButtonId').removeAttr("disabled");
										}
									}, 'json');
								}
							}
						</script>
						<script type="text/javascript">
							$(function() {
								loadComments(1);
							});
							function loadLastPage() {
								loadComments(parseInt($('#loadCurrentPageId').val()) - 1);
							}
							function loadNextPage() {
								loadComments(parseInt($('#loadCurrentPageId').val()) + 1);
							}
							//发布评论
							function publicComments() {
								if (!'${USEROBJ.id}') {
									alert('请先登陆用户');
									return;
								}
								$('#commentsParentidId').val('');
								$('#commentsOpLabel').text("新评论");
								$('#commentsNoteId').val('');
								$('#commentsForm').modal({
									keyboard : false
								});
							}
							//回复评论
							function replyComments(parentId) {
								if (!'${USEROBJ.id}') {
									alert('请先登陆用户');
									return;
								}
								$('#commentsParentidId').val(parentId);
								$('#commentsOpLabel').text("回复评论");
								$('#commentsNoteId').val('');
								$('#commentsForm').modal({
									keyboard : false
								});
							}
							//加载评论
							function loadComments(page) {
								$.post('classcomment/query.do', {
									'ruleText' : 'CLASSID:=:${classview.classt.id }_,_',
									'page' : page,
									'rows' : 20
								}, function(flag) {
									if (flag.STATE == 0) {
										$('#commentsListDataBoxId').html('');
										/*$('#loadCurrentPageId').val(flag.result.currentPage);
										if (flag.result.currentPage > 1) {
											$('#loadLastButtionId').show();
										} else {
											$('#loadLastButtionId').hide();
										}
										if (flag.result.currentPage >= flag.result.totalPage) {
											$('#loadNextButtionId').hide();
										} else {
											$('#loadNextButtionId').show();
										}
										$('#commentsAllNumId').html(flag.result.totalSize);*/
										if (flag.rows.length <= 0) {
											$('#commentsListDataBoxId').append(
													"<li ><center>~暂无评论~</center></li>");
										}
										$(flag.rows).each(function(i, obj) {
											$('#commentsListDataBoxId').append(creatNode(obj));
										});
									} else {
										alert(flag.MESSAGE);
									}
								}, 'json');
							}
							function creatNode(obj) {
								var html11 = '<li><div class="media">';
								var html17 = '	<div class="media-body">';
								var html18 = '		<h4 class="media-heading">' + obj.CUSERNAME + '</h4>';
								var html19 = '		<div class="comments-text">' + obj.DESCRIPTION  + '</div>';
								var html20 = '		<div style="text-align: right; padding-top: 10px;">';
								var html21 = '			<span class="comment-time">' + obj.CTIME + '</span>';
								var html23 = '		</div>';
								var html24 = '	</div>';
								var html25 = '</div></li>';
								var nodeHtml = html11 + html17 + html18 + html19 + html20 + html21 + html23
										+ html24 + html25;
								return nodeHtml;
							}
						</script>

					</div>
				</div>
				<div class="col-xs-3">
					<jsp:include page="commons/includeUserProcess.jsp"></jsp:include>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" style="padding: 0px;">
		<!-- 页脚 -->
		<jsp:include page="../commons/foot.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript">
	//发布课程
	function publicClass(classid, hourid) {
		window.location = "<PF:basePath/>hourweb/PubContinue.do?classid="
				+ classid + "&hourid=" + hourid;
	}
</script>
</html>